<template>
	<div class="flex-1 flex flex-col">
		<base-nav-bar titleT="transactions.record" is-goback />
		<div class="h-group-t-big" />
		<div class="flex p-[10px] bg-bg-1 rounded-lg overflow-x-auto justify-between items-center">
			<base-switch-tabs v-model="tab" :data="tabList" style="--min-width: auto" />
			<Filter @update-sorting-values="handleFilter" />
		</div>
		<div class="h-group-t-big" />
		<router-view />
	</div>
</template>
<script lang="ts" setup>
import { BaseNavBar, BaseSwitchTabs, SwitchTabsItem } from '@/components/base'
import Filter from './filter/index.vue'
import { ref, watch } from 'vue'
import { router } from '@/router'
import { find } from 'lodash-es'

const tabList = <SwitchTabsItem[]>[
	{ id: 'all', nameT: 'transactions.all' },
	{ id: 'deposit', nameT: 'transactions.deposit' },
	{ id: 'withdraw', nameT: 'transactions.withdraw' },
	{ id: 'bonus', nameT: 'transactions.bonus' },
	{ id: 'tips', nameT: 'transactions.tips' },
	{ id: 'agent', nameT: 'transactions.agent' },
	{ id: 'adjust', nameT: 'transactions.adjust' }
]

const getTabItem = () => find(tabList, { id: router.currentRoute.value.path.split('/').pop() })
const tab = ref<string | number>(getTabItem()?.id || 'all')
const handleFilter = () => {}
watch(tab, (id) => router.push({ name: `transactions.${id}` }))
watch(router.currentRoute, () => {
	const id = getTabItem()?.id
	!!id && (tab.value = id)
})
</script>
